<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定头部与滚动内容布局（原生 CSS）</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', sans-serif;
    }

    body {
      min-height: 100vh;
      background-color: #f0f2f5;
    }

    .container {
      max-width: 800px;
      margin: 30px auto;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .header {
      position: sticky;
      top: 0;
      z-index: 100;
      background-color: white;
      border-bottom: 1px solid #e4e6eb;
      padding: 16px 24px;
    }

    .header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .header-title {
      font-size: 1.375rem;
      font-weight: 600;
      color: #1a73e8;
    }

    /* 可滚动内容区域 */
    .content {
      height: 400px;
      /* 固定高度, 内容超出时出现滚动条 */
      overflow-y: auto;
      /* 垂直滚动条 */
      padding: 24px;
      gap: 20px;
      display: flex;
      flex-direction: column;
    }

    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      padding: 16px;
      transition: transform 0.2s;
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #f0f2f5;
    }

    .username {
      font-size: 0.9375rem;
      font-weight: 500;
      color: #1a73e8;
    }



    .time {
      font-size: 0.75rem;
      color: #666;
    }

    .card-content {
      line-height: 1.6;
      color: #333;
      margin-bottom: 16px;
    }

    .card-image {
      max-width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 8px;
      margin: 16px 0;
      transition: transform 2s ease-in-out;
    }

    /* 悬浮的时候旋转并缩小 */
    .card-image:hover {
      transform: rotate(360deg) scale(0.6);
    }

    .actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.875rem;
      /* 14px */
      color: #666;
    }

    .action-button {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      transition: color 0.2s;
    }

    .action-button:hover {
      color: #1a73e8;
    }

    /* 滚动条样式（Webkit 内核） */
    .content::-webkit-scrollbar {
      width: 8px;
    }

    .content::-webkit-scrollbar-track {
      background-color: #f0f2f5;
    }

    .content::-webkit-scrollbar-thumb {
      background-color: #d0d5dd;
      border-radius: 4px;
    }

    /* 适配小屏幕 */
    @media (max-width: 640px) {
      .container {
        margin: 16px;
        border-radius: 8px;
      }

      .header {
        padding: 12px 16px;
      }

      .header-title {
        font-size: 1.125rem;
        /* 18px */
      }

      .content {
        height: calc(100vh - 120px);
        /* 动态计算高度 */
        padding: 16px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 固定头部 -->
    <div class="header">
      <div class="header-top">
        <div class="header-title">社交动态</div>
        <div class="header-actions">
          <button>&#8942;</button> <!-- 更多图标 -->
        </div>
      </div>

      <div class="nav-tabs">
        <button class="active">首页</button>
        <button>发现</button>
        <button>通知</button>
        <button>收藏</button>
      </div>
    </div>

    <!-- 可滚动内容区域 -->
    <div class="content">
      <!-- 内容卡片 1 -->
      <div class="card">
        <div class="card-header">

        </div>

        <div class="card-content">
          这是一个使用原生 CSS 实现的固定头部布局, 内容区域可以独立滚动。通过 position: sticky 和 overflow 属性轻松实现。
        </div>

        <img src="https://picsum.photos/600/300?seed=1" alt="示例图片" class="card-image">

        <div class="actions">
          <div class="action-button">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
            </svg>
            128 喜欢
          </div>

          <div class="action-button">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M15.75 10.5l4.725 4.725M12 15.75l4.725-4.725M8.25 15.75l4.725 4.725M5.25 12l4.725-4.725M5.25 8.25L9.975 3.525M15.75 3.525L20.475 8.25M12 3.525l4.725 4.725" />
            </svg>
            34 评论
          </div>

          <div class="action-button">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M18.75 12.75L21 15 15 21 12.75 18.75 15 15 18.75 12.75z" />
            </svg>
            分享
          </div>
        </div>
      </div>

      <!-- 更多内容卡片... -->
      <div class="card">
        <div class="card-header">

        </div>

        <div class="card-content">
          这是一个使用原生 CSS 实现的固定头部布局, 内容区域可以独立滚动。通过 position: sticky 和 overflow 属性轻松实现。
        </div>

        <img src="https://picsum.photos/600/300?seed=1" alt="示例图片" class="card-image">

        <div class="actions">
          <div class="action-button">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
            </svg>
            128 喜欢
          </div>

          <div class="action-button">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M15.75 10.5l4.725 4.725M12 15.75l4.725-4.725M8.25 15.75l4.725 4.725M5.25 12l4.725-4.725M5.25 8.25L9.975 3.525M15.75 3.525L20.475 8.25M12 3.525l4.725 4.725" />
            </svg>
            34 评论
          </div>

          <div class="action-button">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M18.75 12.75L21 15 15 21 12.75 18.75 15 15 18.75 12.75z" />
            </svg>
            分享
          </div>
        </div>
      </div>
      <div class="card">...</div>
      <div class="card">...</div>
    </div>
  </div>
</body>

</html>